<template>
  <div class="app-container">
    <div style="margin: 20px;">
        <el-button style="margin-bottom: 10px;" type="primary" @click="doAdd('form1')"> 新增 </el-button>
        <div class="upload-container">
          <el-upload ref="upload" :limit="1" action="" 
            name="impfile" :on-change="handleUploadChange_d" :on-remove="handleUploadRemove_d"
            :before-remove="handleUploadBeforeRemove_d" list-type="text">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      <el-table ref="table-main" :data="zbdata" height="calc(100% - 113px)" :loading="bgLoading" border :key="keyadd">
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="材料物品类别" align="center" prop="clwplb" width="200" show-overflow-tooltip />
        <el-table-column label="材料物品名称" align="center" prop="clwpmc" width="200" show-overflow-tooltip />
        <el-table-column label="型号规格" align="center" prop="xhgg" width="200" show-overflow-tooltip />
        <el-table-column label="计量单位" align="center" prop="jldw" width="200" show-overflow-tooltip />
        <el-table-column label="入库数量" align="center" prop="rksl" width="200" show-overflow-tooltip />
        <el-table-column label="存放位置" align="center" prop="cfwz" width="200" show-overflow-tooltip />
        <el-table-column label="录入类型" align="center" prop="lrlx" width="200" show-overflow-tooltip />
        <el-table-column label="备注" align="center" prop="bz" width="200" show-overflow-tooltip />

        <el-table-column label="操作" align="center" class-name="small-padding" width="250" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="delbutton" @click="doUpdate(scope.row, scope.$index)"> 修改 </el-button>
            <el-button type="text" class="delbutton" @click="doDelete(scope.row, scope.$index)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <qjfy :total='total' @fun="qjfyfun"></qjfy> -->
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="zOpen1" width="800px" append-to-body>
      <div class="el-dialog-div">

        <el-form ref="form1" :model="formData" :validate-on-rule-change=false label-width="150px"
          :disabled="formDisable">
          <div class="wgbj-2">
            <!-- 材料物品类别 -->
            <el-form-item label="材料物品类别" prop="clwplb" :rules="[
              { required: true, message: '请输入材料物品类别', trigger: 'blur' }
            ]">
              <el-select v-model="formData.clwplb" filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="({ sjxdm, sjxmc },index) in xlsj1" :key="index" :label="sjxmc" :value="sjxdm"></el-option>
              </el-select>
            </el-form-item>

            <!-- 材料物品名称 -->
            <el-form-item label="材料物品名称" prop="clwpmc" :rules="[
              { required: true, message: '请输入材料物品名称', trigger: 'blur' }
            ]">
              <el-select v-model="formData.clwpmc" filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="({ sjxdm, sjxmc }, index) in xlsj2" :key="index" :label="sjxmc" :value="sjxdm"></el-option>
              </el-select>
            </el-form-item>

            <!-- 型号规格 -->
            <el-form-item label="型号规格" prop="xhgg" :rules="[
              { required: true, message: '请输入型号规格', trigger: 'blur' }
            ]">
              <el-select v-model="formData.xhgg" filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="({ sjxdm, sjxmc }, index) in xlsj3" :key="index" :label="sjxmc" :value="sjxdm"></el-option>
              </el-select>
            </el-form-item>

            <!-- 计量单位 -->
            <el-form-item label="计量单位" prop="jldw" :rules="[
              { required: true, message: '请输入计量单位', trigger: 'blur' }
            ]">
              <el-select v-model="formData.jldw" filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="({ sjxdm, sjxmc }, index) in xlsj4" :key="index" :label="sjxmc" :value="sjxdm"></el-option>
              </el-select>
            </el-form-item>

            <!-- 入库数量 -->
            <el-form-item label="入库数量" prop="rksl" :rules="[
              { required: true, message: '请输入入库数量', trigger: 'blur' }
            ]">
              <el-input v-model="formData.rksl" placeholder="请输入入库数量"></el-input>
            </el-form-item>

            <!-- 存放位置 -->
            <el-form-item label="存放位置" prop="cfwz" :rules="[
              { required: true, message: '请输入存放位置', trigger: 'blur' }
            ]">
              <el-select v-model="formData.cfwz" filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="({ sjxdm, sjxmc }, index) in xlsj5" :key="index" :label="sjxmc" :value="sjxdm"></el-option>
              </el-select>
            </el-form-item>

            <!-- 录入类型 -->
            <!-- <el-form-item label="录入类型" prop="lrlx" :rules="[
              { required: true, message: '请输入录入类型', trigger: 'blur' }
            ]">
              <el-select v-model="formData.lrlx" filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="({ sjxdm, sjxmc }, index) in xlsj7" :key="index" :label="sjxmc" :value="sjxdm"></el-option>
              </el-select>
            </el-form-item> -->



          </div>


          <el-form-item label="备注">
            <el-input v-model="formData.bz" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="!formDisable" type="primary" @click="doSubmit"> 保存 </el-button>
        <el-button class="cancelBtn" @click="doClose"> 关 闭 </el-button>
      </div>
    </el-dialog>
    <qjckfj ref="ckfj"></qjckfj>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import dayjs from 'dayjs'

export default Vue.extend({
  props: {
    popobj: {
      type: Object,
      default: {}
    },
    Open1:{
      type: Boolean,
      default: false
    },
    jklj: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      title: '入库登记', //页面标题
      dialogTitle: '', // 弹框标题
      bgLoading: false, // 表格加载状态
      zOpen1: false, //弹框状态
      zbdata: [], //主表格数据
      xlsj1: [],//查询选择器 下拉数据
      xlsj2: [],//查询选择器 下拉数据
      xlsj3: [],//查询选择器 下拉数据
      xlsj4: [],//查询选择器 下拉数据
      xlsj5: [],//查询选择器 下拉数据
      xlsj6: [],//查询选择器 下拉数据
      xlsj7: [],//查询选择器 下拉数据
      xlsj8: [],//查询选择器 下拉数据
      xlsj9: [],//查询选择器 下拉数据
      xlsj10: [],//查询选择器 下拉数据
      xlsj11: [],//查询选择器 下拉数据
      optype: 'xz', //操作类型
      formData: {
        "clwplb": "",  // 材料物品类别  
        "clwpmc": "",  // 材料物品名称  
        "xhgg": "",    // 型号规格  
        "jldw": "",    // 计量单位  
        "rksl": "",    // 入库数量  
        "cfwz": "",    // 存放位置  
        "lrlx": "手工录入",    // 录入类型  
        "bz": "",      // 备注  
        "saved": "",   // 是否保存  
        "rksl_old": "",// 原入库数量  
        "rkbh": "",    // 入库编号  
        "sfzf": "",    // 是否作废  
        "id_cljh": "", // 材料计划ID  
        "id": ""       // ID  
      }, //录入Form数据
      formDisable: false, //表单禁用状态
      queryParams: {
        sel_rkr: '',
        start: 0,
        limit: 20,
      }, //查询参数
      total: 0,
      xgdjg: 0,
      keyadd: 0,
      dgfjwj: {  //上传配置
        uploadFiles: [], //已上传文件列表
      },
      hdfjwj: {  //上传配置
        uploadFiles: [], //已上传文件列表
      }
    }
  },
  computed: {
  },
  watch: {
    optype: {
      handler(newVal, oldVal) {
        if (newVal == 'ck') {
          this.formDisable = true;
        } else {
          this.formDisable = false;
        }
      },
      deep: true,
    },
    Open1: {
      handler(newVal, oldVal) {
        console.log(1111111111111111111111111111111111111111);
        this.getListData();
        this.getxlsj1();
      },
      deep: true,
    },
    zbdata: {
      handler(newVal, oldVal) {
        console.log('zbdata', newVal, oldVal);
      },
      deep: true,
    },
  },
  created() {
    this.getListData();
    this.getxlsj1();
  },
  mounted() {
    // this.getListData();
    // this.getxlsj1();
  },

  methods: {
    czcxfun() { // 清空表单
      this.formData = {
        "clwplb": "",  // 材料物品类别  
        "clwpmc": "",  // 材料物品名称  
        "xhgg": "",    // 型号规格  
        "jldw": "",    // 计量单位  
        "rksl": "",    // 入库数量  
        "cfwz": "",    // 存放位置  
        "lrlx": "手工录入",    // 录入类型  
        "bz": "",      // 备注  
        "saved": "",   // 是否保存  
        "rksl_old": "",// 原入库数量  
        "rkbh": "",    // 入库编号  
        "sfzf": "",    // 是否作废  
        "id_cljh": "", // 材料计划ID  
        "id": ""       // ID  
      }
      this.dgfjwj.uploadFiles = [];
      this.hdfjwj.uploadFiles = [];
    },
    resetQuery() {  //查询参数重置按钮事件
      this.queryParams = {
        sel_rkr: '',
        start: 0,
        limit: 20,
      }
      this.getListData()
    },
    getxlsj1() { //获取 选择器数据
      try {
        const param = {
          p_qsrq: this.queryParams.sel_qsrq,
          p_jzrq: this.queryParams.sel_jzrq,
        };


        this.$getSelectorData("in_clwplb", this.queryParams, this.jklj).then((res) => {
          this.xlsj1 = res.success ? res.rows : []
        })
        this.$getSelectorData("in_clwpmc", this.queryParams, this.jklj).then((res) => {
          this.xlsj2 = res.success ? res.rows : []
        })
        this.$getSelectorData("in_xhgg", this.queryParams, this.jklj).then((res) => {
          this.xlsj3 = res.success ? res.rows : []
        })
        this.$getSelectorData("in_jldw", this.queryParams, this.jklj).then((res) => {
          this.xlsj4 = res.success ? res.rows : []
        })
        this.$getSelectorData("in_cfwz", this.queryParams, this.jklj).then((res) => {
          this.xlsj5 = res.success ? res.rows : []
        })





      } catch (error) {
        console.warn('接口提示', error)
      }
    },
    qjfyfun(e) {//分页
      this.queryParams.start = e.start;
      this.queryParams.limit = e.limit;
    },
    sjfwfun(e, e1) {//日期范围选择器事件
      this.queryParams.sel_qsrq = e;
      this.queryParams.sel_jzrq = e1;
    },
    handleUploadChange_d(file, filelist) { //上传文件改变事件
      var _fileData = new FormData();
      // _fileData.append("bizPath", "syfxxt/khfw");
      // _fileData.append("uploadType", "minio");
      _fileData.append("impfile", file.raw, file.name);
      this.$importExcel(_fileData, this.jklj).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.dgfjwj.uploadFiles = filelist;
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.dgfjwj.uploadFiles = filelist;
        }
      })
        .catch(() => {
          this.$message.error({ content: '上传失败!', placement: 'center' });
          filelist.splice(filelist.indexOf(file), 1);
          this.dgfjwj.uploadFiles = filelist;
        });
    },
    handleUploadChange_h(file, filelist) {
      var _fileData = new FormData();
      _fileData.append("bizPath", "syfxxt/khfw");
      _fileData.append("uploadType", "minio");
      _fileData.append("file", file.raw, file.name);
      this.$uploadFile(_fileData).then((res) => {
        if (res.data.code === 200) {
          file.minioID = res.data.data.split(":")[0];
          file.filename = file.name;
          this.hdfjwj.uploadFiles = filelist;
        } else {
          this.$message.error({ content: '上传失败!', placement: 'center' })
          filelist.splice(filelist.indexOf(file), 1);
          this.hdfjwj.uploadFiles = filelist;
        }
      })
        .catch(() => {
          this.$message.error({ content: '上传失败!', placement: 'center' });
          filelist.splice(filelist.indexOf(file), 1);
          this.hdfjwj.uploadFiles = filelist;
        });
    },
    handleUploadBeforeRemove_d(file) {//上传文件删除前事件
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },
    handleUploadBeforeRemove_h(file, filelist) {
      if (file.fileid && file.fjid) {
        return this.$modal.confirm("该文件已上传，确认删除该文件？");
      } else {
        return true;
      }
    },
    handleUploadRemove_d(file, filelist) {//上传文件删除事件
      this.dgfjwj.uploadFiles = filelist;
      if (file.fileid && file.id) {
        this.$submit_delfile({ fileid: file.fileid, id: file.id }, this.jklj)
          .then((res) => {
            if (res.success) {
              this.$message.success({ content: '删除成功!', placement: 'center' })
            } else {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            }
          })
          .catch(() => {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          });
      }
    },
    handleUploadRemove_h(file, filelist) {
      this.hdfjwj.uploadFiles = filelist;
      if (file.fileid && file.fjid) {
        this.$submit_delfile_fj({ fileid: file.fileid, fjid: file.fjid, tzggid: this.formData.id }, this.jklj)
          .then((res) => {
            if (res.success) {
              this.$message.success({ content: '删除成功!', placement: 'center' })
            } else {
              this.$message.error({ content: '删除失败!', placement: 'center' })
            }
          })
          .catch(() => {
            this.$message.error({ content: '删除失败!', placement: 'center' })
          });
      }
    },
    getListData() { //获取主表格查询数据
      try {
        this.bgLoading = true
        this.$getListData_name({
          rkbh: this.popobj.rkbh,
          page: 1,
          start: 0,
          limit: 50,
        }, this.jklj, 'mx').then((res) => {
          if (res.success) {
            this.zbdata = res.rows;
            this.total = res.total;
            this.keyadd++;
          } else {
            this.zbdata = []
            this.$message.error({ content: '请重新搜索!', placement: 'center' })
          }
        })
      } catch (error) {
        this.bgLoading = false;
        console.warn('接口提示', error);
      }
    },
    doSubmit() {//处理保存按钮事件
      this.$refs['form1'].validate((valid) => {
        if (valid) {
          if (this.optype == 'xz') {
            this.zbdata.push(this.formData);
          } else if (this.optype == 'xg') {
            // 替换this.zbdata 第this.xgdjg  行
            this.zbdata[this.xgdjg] = this.formData;
            this.keyadd++
          }
          this.zOpen1 = false;
          this.$emit('popfun', this.zbdata);
        }
      });
    },
    doAdd(formName) {//处理新增按钮事件
      this.zOpen1 = true;
      this.optype = 'xz';
      this.czcxfun();
      this.formData.optype = 'add';
      this.dialogTitle = this.title + ' >> 新增';
    },
    doUpdate(row,index) {//处理修改按钮事件
      console.log(row,index);
      this.xgdjg=index
      
      this.czcxfun();
      this.xzsj = row;
      this.zOpen1 = true;
      this.optype = 'xg';
      this.dialogTitle = this.title + ' >> 修改';
      this.formData = { ...row };
      this.formData.optype = 'update';
      // 附件查看
    },
    doDelete(row,index) {//处理删除按钮事件
      this.xgdjg=index
      return this.$modal.confirm("是否确认删除该条数据？")
        .then(() => {
          // 写一下从this.zbdata数组里移除this.xgdjg项
          this.zbdata.splice(index, 1); 
          this.keyadd++
          this.$emit('popfun', this.zbdata);
        })
        .catch(() => {
        });
    },
    //处理导出按钮事件
    doExportExcel() {
      var params = { ...this.queryParams };
      for (let key in params) {
        if (/^sel_/.test(key)) {
          var new_key = key.replace(/^sel_/, 'p_');
          params[new_key] = params[key];
        }
      }
      try {
        if (!this.queryParams) {
          this.$message.info({ content: '请先查询数据!', placement: 'center' })
        }
        const filename = this.title + '-' + dayjs().format('YYYYMMDDHHmmssSSS') + '.xls';
        this.$exportExcel_qt(this.download, params, filename, this.jklj, 'clrkdrmb');
      } catch (error) {
      }
    },
    doView(row) {//处理查看按钮事件
      this.zOpen1 = true;
      this.optype = 'ck';
      this.dialogTitle = this.title + ' >> 查看';
      this.formData = { ...row };
    },
    doViewFJ(row) {//处理查看附件按钮事件
      this.$refs.ckfj.dkfj({ start: 0, limit: 100, sel_tzggid: row.id, }, this.jklj);
    },
    doClose() {//处理关闭事件
      this.zOpen1 = false;
    },
  },
})
</script>
<style lang="less" scoped>
.app-container {
  height: 100%;
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}



::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-radio.is-disabled .el-radio__inner,
::v-deep .el-radio.is-disabled .el-radio__label,
::v-deep .el-checkbox.is-disabled .el-checkbox__inner,
::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  background-color: #f6f6f6 !important;
  /* 示例：改变背景颜色 */
  color: #333 !important;
  /* 示例：改变文字颜色 */
}

::v-deep .el-upload.el-upload--text {
  margin: 0 !important;
}

.mainSearchPanel .page-header-title {
  font-size: 16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin: 0;
  padding: 0;
  margin: 10px 0;
}

.mainSearchPanel .el-divider--horizontal {
  margin: 0 !important;
  margin-top: 10px;
}
.upload-container{
  display: inline-block;
  width: 0px;
}
</style>
